<template>
  <div class="vertical-rules py-1" :style="style">
    <div
      v-for="(item, key) in comH"
      :key="item"
      class="scales"
      :style="{ top: key * 10 + 'px' }"
      :class="{ 'high-line': key % 5 === 0 }"
    >
      <span v-if="key % 5 === 0">
        {{ key }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  height: {
    type: Number
  }
});
const style = computed(() => {
  return {
    height: `${props.height}px`
  };
});
const comH = computed(() => {
  if (props.height) return Math.ceil(props.height / 10);
  return 0;
});
</script>

<style lang="scss" scoped>
.vertical-rules {
  position: absolute;
  border-right: 1px solid #eee;
  height: 100%;
  width: 10px;
  top: 0;
  left: -16px;
  .scales {
    width: 5px;
    height: 1px;
    right: 0;
    background-color: #999;
    position: absolute;
    span {
      font-size: 12px;
      transform: scale(0.5) translateX(-160%) translateY(-120%);
      color: #666;
      display: inline-block;
      width: 14px;
      left: 0;
    }
  }
  .high-line {
    width: 10px;
  }
}
</style>
